<!--  -->
<template>
  <div>
    <section class="jumbotron">
      <h3 class="jumbotron-heading">Search Github Users</h3>
      <div>
        <input type="text"
               placeholder="enter the name you search"
               v-model="searchValue" />
        <button @click="search">搜索</button>
      </div>
    </section>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: 'Search',
  data () {
    return {
      // 搜索输入值
      searchValue: '',
    }
  },
  methods: {
    // 搜索值
    async search () {
      // 请求发送之前通知lists组件更新它的data
      this.$eventBus.$emit("getSearchData", {
        isFirst: false,
        isLoading: true,
      });
      if (this.searchValue.length == 0) {
        alert("请输入搜索值");
        return false
      }
      // 请求接口数据
      // 1.queryString字符串
      // axios.get("https://api.github.com/search/users?q=" + this.searchValue)
      // 2.传递参数

      // axios请求方式一:
      // axios.get("https://api.github.com/search/users", {
      //   params: {
      //     q: this.searchValue
      //   }
      // })
      //   .then((res) => {
      //     console.log(res);
      //     // 发送事件总线
      //     this.$eventBus.$emit("getSearch", res.data);
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   })

      // axios请求方式二:asnyc+await终极
      try {
        const response = await axios.get("https://api.github.com/search/users", {
          params: {
            q: this.searchValue
          }
        })
        const { items } = response.data;
        // console.log(items);
        // 请求成功后通知lists组件更新data，发送事件总线
        this.$eventBus.$emit("getSearchData", {
          isLoading: false,
          listData: items
        });
      } catch (error) {
        // 请求失败后通知lists更新它的data
        this.$eventBus.$emit("getSearchData", {
          isLoading: false,
          listData: [],
          errMsg: error.message,
        });
        console.log(error.message);
      }

    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>